<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.div1 {
	width: 200px;
	height: 100px;
	border: 1px red solid;
	background-color: red;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	
	position:absolute;
}

.div2 {
	width: 200px;
	height: 100px;
	border: 1px yellow solid;
	background-color: yellow;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	transform-origin: 100% 100%;
	transform:rotate(90deg);
	position:absolute;
}

.div3 {
	width: 200px;
	height: 100px;
	border: 1px skyblue solid;
	background-color: skyblue;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	transform-origin: 100% 100%;
	transform:rotate(180deg);
	position:absolute;
}

.div4 {
	width: 200px;
	height: 100px;
	border: 1px pink solid;
	background-color: pink;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
    transform-origin: 100% 100%;
	transform:rotate(-90deg);
	position:absolute;
}

.d1 {
	animation: che 3s infinite linear;
	border:2px blue solid;
	width:400px;
	height:200px;
	position:relative;
	margin: 200px auto;
	transform-origin:50% 50%;
	
}
@keyframes che{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
</style>
</head>
<body>
	<div class="d1">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
		<div class="div4"></div>
	</div>
</body>
</html>